<template>
  <view class="section">
    <view class="options" v-if="optionsList.length > 0">
      <view
        class="options_container"
        v-for="(item, index) in optionsList"
        :key="index"
        @click="choiceAnswer(index)"
        :class="{
          hover: choiceIndex === index,
          correct: correctIndex === index && isShowCorrectAnswer,
          error: errorIndex === index && isShowErrorAnswer,
        }"
      >
        <view class="options_content">
          {{ String.fromCharCode(index + 65) }}.{{ item }}
        </view>
        <view class="options_iamge">
          <image
            v-if="correctIndex === index && isShowCorrectAnswer"
            src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/correct.png"
            mode="widthFix"
          ></image>
          <image
            v-if="errorIndex === index && isShowErrorAnswer"
            src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/error.png"
            mode="widthFix"
          ></image>
        </view>
      </view>
    </view>
    <view class="btn">
      <view class="btn_content" v-if="!isShowAnswer" @click="determineChoice()">
        <text>确定</text>
      </view>
      <view
        class="btn_content"
        v-else-if="isShowErrorAnswer && !isCorrect"
        @click="reChoice()"
      >
        <text>重新选择</text>
      </view>
      <view
        class="btn_content"
        v-else-if="isShowAnswer && isCorrect"
        @click="next()"
      >
        <text>下一个</text>
      </view>
    </view>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import { saveWordLearningRecord } from "@/api/sync";
import { arrayRandomly } from "@/libs/tools";
export default {
  components: {},
  props: {
    wordData: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      optionsList: [],
      correctIndex: -1,
      errorIndex: -1,
      choiceIndex: -1,
      isCorrect: false,
      isShowAnswer: false,
      isShowCorrectAnswer: false,
      isShowErrorAnswer: false,
    };
  },
  mounted() {
    this.initOptions();
  },
  methods: {
    initOptions() {
      let wordData = this.wordData;
      this.optionsList.push(
        wordData.optionA,
        wordData.optionB,
        wordData.optionC,
        wordData.wordParaphrase
      );
      this.optionsList = arrayRandomly(this.optionsList);
      this.optionsList.some((item, index) => {
        if (item === this.wordData.wordParaphrase) {
          this.correctIndex = index;
          return true;
        }
      });
    },
    determineChoice() {
      if (this.choiceIndex === -1) {
        this.$refs.uToast.show({
          title: "请选择答案",
          type: "warning",
        });
        return;
      }
      this.isShowAnswer = true;
      if (this.choiceIndex === this.correctIndex) {
        this.isCorrect = true;
        this.isShowCorrectAnswer = true;
      } else {
        this.errorIndex = this.choiceIndex;
        this.isCorrect = false;
        this.isShowErrorAnswer = true;
      }
      this.$playBgAudio(this.isCorrect ? "correct" : "error");
      this.saveRecord();
    },
    reChoice() {
      this.errorIndex = -1;
      this.choiceIndex = -1;
      this.isCorrect = false;
      this.isShowAnswer = false;
      this.isShowCorrectAnswer = false;
      this.isShowErrorAnswer = false;
    },
    choiceAnswer(index) {
      if (this.isShowAnswer) return;
      this.choiceIndex = index;
    },
    saveRecord() {
      let params = {
        pass: this.isCorrect ? 1 : 0,
        step: "5",
        type: "dclx",
        wordId: this.wordData.id,
      };
      saveWordLearningRecord(params);
    },
    next() {
      this.$emit("next");
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./WordStep5";
</style>
